import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';
import Basic from '../../examples/InputGroup/Basic';
import ButtonDropdowns from '../../examples/InputGroup/ButtonDropdowns';
import Buttons from '../../examples/InputGroup/Buttons';
import Checkboxes from '../../examples/InputGroup/Checkboxes';
import MultipleAddons from '../../examples/InputGroup/MultipleAddons';
import MultipleInputs from '../../examples/InputGroup/MultipleInputs';
import SegmentedButtonDropdowns from '../../examples/InputGroup/SegmentedButtonDropdowns';
import Sizes from '../../examples/InputGroup/Sizes';

# InputGroup

Place one add-on or button on either side of an input. You may also
place one on both sides of an input. Remember to place
`<label>`s outside the input group.

<ReactPlayground codeText={Basic} />

## Sizing

Add the relative form sizing classes to the `InputGroup` and
contents within will automatically resize—no need for repeating the form
control size classes on each element.

<ReactPlayground codeText={Sizes} />

## Checkboxes and radios

Use the `InputGroup.Radio` or
`InputGroup.Checkbox` to add options to an input group.

<ReactPlayground codeText={Checkboxes} />

## Multiple inputs

While multiple inputs are supported visually, validation styles are only
available for input groups with a single input.

<ReactPlayground codeText={MultipleInputs} />

## Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio
input versions.

<ReactPlayground codeText={MultipleAddons} />

## Button addons

<ReactPlayground codeText={Buttons} />

## Buttons with Dropdowns

<ReactPlayground codeText={ButtonDropdowns} />

## Segmented buttons

<ReactPlayground codeText={SegmentedButtonDropdowns} />

## API

<ComponentApi metadata={props.data.InputGroup} />

export const query = graphql`
  query InputGroupQuery {
    InputGroup: componentMetadata(displayName: { eq: "InputGroup" }) {
      ...ComponentApi_metadata
    }
  }
`;
